<!DOCTYPE html>
<html lang="en">
    <!--当前页面的设置和配置-->
    <head>
        <!--标题标签-->
        <title>高德地图导航定位</title>
        <!--解析字符编码-->
        <meta charset="UTF-8">
        <!--媒体识别：自动适配移动端，不定义时，统一PC端-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <!--内联样式-->
        <style rel="stylesheet" type="text/css">
            /*去除正文区域默认的内外间距：全屏*/
            body { margin:0; padding:0; }
            /*地图容器大小：全屏*/
            #container { width:100%; height:100vh; }
        </style>
    </head>

    <!--正文-->
    <body>
        <!--高德开发者平台：https://lbs.amap.com/   注册账号，设置应用，配置信息，得到key和security
        HTML对接，设置js格式的API      ArkWeb方式，可以绕过鸿蒙操作系统，整合高德地图时，不受语言和系统影响-->
        <!--地图呈现的容器-->
        <div id="container"></div>
        <!--设置全局变量-->
        <script type="text/javascript">
            <!--将密钥设置到全局，后面很多要用，代码固定不能修改，-->
            window._AMapSecurityConfig = {
                securityJsCode: '72ca268556d519dc8ae7276283d8ce25'
            }
        </script>
        <!--加载官方离线脚本，附加申请的key会自动下载你的离线脚本库到本地-->
        <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3cb561ff3508aeb6723180b1fd6c619a"></script>
        <!--自定义脚本开始-->
        <script type="text/javascript">
            //js是弱语言，解释执行的，这里的代码直接允运行的
            //创建地图对象，进行初始化('绑定的容器', {配置})
            var map = new AMap.Map(
                'container',         //加载地图的网页元素id
                {
                    zoom: 30,                       //初始地图的比例
                    center: [114.472866, 38.042471] //初始地图中心点[经度, 维度]
                }
            )

            //当页面正式加载完毕后
            window.onload = function() {
                //调用鸿蒙应用的方法，获取当前设备定位的经纬度
                window.swift.setCurrentLocation()
            }
            //设置地图定位点(经度，纬度)
            function setLocation(lng,lat){
                //重新设置地图中心点(缩放比例,[经度,纬度])
                map.setZoomAndCenter(40,[lng,lat])
                //创建一个标记
                var marker = new AMap.Marker({
                map,
                icon:'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                 position: [lng,lat]
                })
                //加入到地图中
                map.add(marker)
                //为地图新增插件能力：搜索
                map.plugin(['AMap.PlaceSearch'],function(){
                    //创建搜索功能对象，提供所有设置
                    var MSearch = new AMap.PlaceSearch({
                        map,          //绑定的地图对象
                        pageSize: 4, //每页结果数,默认10
                        pageIndex: 1, //请求页码，默认1
                        extensions: "base" //返回信息详略，默认为base（基本信息）
                    })
                    //为地图设置监听，搜索完成，返回结果
                    AMap.Event.addListener(MSearch, "complete", (res)=>{
                    //调用鸿蒙应用方法，将结果传过去
                    window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois))
                    })
                    //执行搜索
                    MSearch.searchNearBy('停车场',[lng,lat])
                })
            }

        </script>
    </body>
</html>